<template>
  <view class="container">
    <c-navBar title="首页" isTran isBack></c-navBar>

    <view class="content1" :style="{ paddingTop: (height + 20) + 'px' }" @click="information">
      <view class="top-box">
        <view class="left">
          <image class="img" v-if="userInfo.avatar" :src="vuex_imgUrl + userInfo.avatar" mode="scaleToFill" />
          <image class="img" v-else src="/static/home/avator.png" mode="scaleToFill" />
          <view class="text">
            <text class="text1-box">
              <text class="text1" v-if="userInfo.userType == 2">{{ userInfo.contactPeople || '测试' }}</text>
              <text class="text1" v-else>{{ userInfo.nickName || '测试' }}</text>
              <text class="text2" v-if="userInfo.userType == 2">已认证</text>
            </text>
            <text class="text2" v-if="userInfo.userType == 2">{{ userInfo.nickName || '测试' }}</text>
            <text class="text2" v-else>{{ $fn.phoneEn(userInfo.contactPhone) }}</text>
          </view>
        </view>
        <image class="right" src="/static/home/right.png" mode="scaleToFill" />
      </view>
    </view>

    <view class="content2" :style="{ top: (height + 120) + 'px' }">
      <view class="top-box">
        <view class="left" @click="report">
          <view class="text">
            机器使用上报
          </view>
          <view class="btn">查看</view>
          <image class="img" src="/static/home/l.png" mode="scaleToFill" />
        </view>
        <view class="right" @click="establish">
          <view class="text">
            点工任务创建
          </view>
          <view class="btn">查看</view>
          <image class="img" src="/static/home/r.png" mode="scaleToFill" />
        </view>
      </view>

      <view class="list">
        <view class="title">
          <view class="icon"></view>
          <text>常用功能</text>
        </view>


        <view class="item" @click="jumpPage('上报记录')">
          <view class="left">
            <image class="img" src="/static/home/1.png" mode="scaleToFill" />
            <text class="item-text">上报记录</text>
          </view>
          <image class="right" src="/static/home/right1.png" mode="scaleToFill" />
        </view>

        <view class="item" @click="jumpPage('点工任务')">
          <view class="left">
            <image class="img" src="/static/home/2.png" mode="scaleToFill" />
            <text class="item-text">点工任务</text>
          </view>
          <image class="right" src="/static/home/right1.png" mode="scaleToFill" />
        </view>

        <view class="item" @click="jumpPage('系统设置')">
          <view class="left">
            <image class="img" src="/static/home/3.png" mode="scaleToFill" />
            <text class="item-text">系统设置</text>
          </view>
          <image class="right" src="/static/home/right1.png" mode="scaleToFill" />
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      height: this.$titleHeight,
      userInfo: {
        nickName: '',
        contactPhone: '***********',
        avatar: '',
      }
    }
  },
  methods: {
    // 账号信息
    information() {
      uni.navigateTo({
        url: '/pages/home/information'
      })
    },
    // 机器使用上报
    report() {
      uni.navigateTo({
        url: '/pages/home/report'
      })
    },
    // 点工任务创建
    establish() {
      uni.navigateTo({
        url: '/pages/home/taskCreate'
      })
    },
    // 常用功能跳转
    jumpPage(type) {
      switch (type) {
        case '上报记录':
          uni.navigateTo({
            url: '/pages/home/reportList'
          })
          break;
        case '点工任务':
          uni.navigateTo({
            url: '/pages/home/taskList'
          })
          break;
        case '系统设置':
          uni.navigateTo({
            url: '/pages/home/setting'
          })
          break;
      }
    },
	// 获取用户信息
	getInfo(){
		this.$api.getInfo().then(res => {
			if(res.code == 200){
				console.log('用户数据',res)
				this.userInfo = res.data;
				uni.setStorageSync('userName',res.data.nickName)
			}
		})
	},
  },
  onShow() {
	  this.getInfo();
    // const token = uni.getStorageSync('token')
    // if (!token) {
    //   return uni.redirectTo({
    //     url: '/pages/tabbar/login'
    //   })
    // }

  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  .content1 {
    width: 750rpx;
    height: 440rpx;
    background: rgba(0, 105, 58, 0.6);
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    .top-box {
      margin: 0 40rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;

        .img {
          margin-right: 32rpx;
          width: 136rpx;
          height: 136rpx;
          background-color: aliceblue;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
        }

        .text {
          padding: 5rpx 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .text1-box {
            display: flex;
            align-items: center;

            .text1 {
              margin-right: 16rpx;
              font-weight: 800;
              font-size: 48rpx;
              color: #FFFFFF;
            }

            .text2 {
              display: inline-block;
              width: 96rpx;
              height: 40rpx;
              background: linear-gradient(270deg, #64A2FF 0%, #4280DD 100%);
              border-radius: 20rpx 2rpx 20rpx 2rpx;

              text-align: center;
              line-height: 40rpx;
              font-weight: bold;
              font-size: 20rpx;
              color: #FFFFFF;
            }
          }

          .text2 {
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
          }
        }
      }

      .right {
        height: 28rpx;
        width: 28rpx;
      }
    }
  }

  .content2 {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 0rpx 0rpx;


    .top-box {
      padding: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .right,
      .left {
        padding: 24rpx;
        position: relative;
        width: 340rpx;
        height: 160rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .btn {
          margin-top: 24rpx;
        }

      }

      .left {
        background: linear-gradient(360deg, #51B4EA 0%, #0574F5 100%);

        .text {
          font-weight: 800;
          font-size: 36rpx;
          color: #FFFFFF;
        }

        .btn {
          width: 96rpx;
          height: 40rpx;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
          border-radius: 24rpx 24rpx 24rpx 24rpx;


          font-weight: 500;
          font-size: 24rpx;
          color: #4280DD;
          line-height: 40rpx;
          text-align: center;
        }

        .img {
          position: absolute;
          width: 108rpx;
          height: 92rpx;
          bottom: 0;
          right: 6rpx;
        }

      }

      .right {
        background: linear-gradient(180deg, #00693A 0%, #63A587 100%);

        .text {
          font-weight: 800;
          font-size: 36rpx;
          color: #FFFFFF;
        }

        .btn {
          width: 96rpx;
          height: 40rpx;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
          border-radius: 24rpx 24rpx 24rpx 24rpx;

          font-weight: 500;
          font-size: 24rpx;
          color: #00693A;
          line-height: 40rpx;
          text-align: center;
        }

        .img {
          position: absolute;
          width: 112rpx;
          height: 100rpx;
          bottom: 0;
          right: 8rpx;
        }
      }


    }


    .list {
      margin-top: 10rpx;

      .title {
        padding: 0rpx 24rpx;
        display: flex;
        align-items: center;

        .icon {
          margin-right: 12rpx;
          width: 12rpx;
          height: 36rpx;
          background: #00693A;
          border-radius: 6rpx 6rpx 6rpx 6rpx;
        }

        .text {
          font-weight: 800;
          font-size: 36rpx;
          color: #262626;
        }
      }


      .item {
        margin: 0 auto;
        padding: 26rpx;
        margin-top: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 686rpx;
        height: 96rpx;
        background: #F7F7F7;
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        .left {
          display: flex;
          align-items: center;

          .img {
            width: 40rpx;
            height: 40rpx;
          }

          .item-text {
            margin-left: 16rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #1A1A1A;
            line-height: 96rpx;
          }
        }

        .right {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }
}
</style>
